<template>
	<view class="content">
		<!-- 登录窗口 -->
		<u-modal
			:showConfirmButton="false"
			:showCancelButton="false"
			class="mymodal"
			:show="show"
			@close="loginwindowclose"
			ref="uModal"
			:asyncClose="true"
			:closeOnClickOverlay="true"
		>
			<u--form :rules="rules" :model="model1" labelPosition="left" ref="form1">
				
				<u-form-item prop="userInfo.username" label="用户名" borderBottom ref="item1">
					<u--input border="none" type="text" placeholder="请输入用户名" v-model="model1.userInfo.username"></u--input>
				</u-form-item>
				
				<u-form-item prop="userInfo.pwd" label="密码" borderBottom ref="item2">
					<u--input border="none" type="password" placeholder="请输入密码" v-model="model1.userInfo.pwd"></u--input>
				</u-form-item>
			</u--form>

			<u-button
				type="error"
				style="margin-top: 30rpx"
				shape="circle"
				text="登录/注册"
				@tap="login"
			></u-button>
		</u-modal>

		<!-- 退出的询问窗口 -->
		<u-modal
			:show="logoutWindowShow"
			title="登出账号确认"
			content='您是否想要退出当前账号？'
			:showConfirmButton="true"
			:showCancelButton="true"
			@confirm="logoutWindowConfirm"
			@cancel="logoutWindowShow = false"
			@close="logoutWindowShow = false"
			:closeOnClickOverlay="true"
		></u-modal>


		<!-- 用户信息 -->
		<view class="cd-userinfo-area" v-if="isLogin">
			<view class="cd-userinfo-avatar">
				<u--image
				width="72" 
				height="72" 
				:src="userInfo.avatar" 
				shape="circle"></u--image>
			</view>
			
			<view class="cd-userinfo-username">{{ userInfo.username }}</view>
			
			<view class="cd-userinfo-logout">
				<!-- 退出 -->
				<u-icon @tap="logout" name="close" color="white" size="14"></u-icon>
			</view>
		</view>
		<view class="cd-userinfo-area" v-else>
			<view class="cd-userinfo-avatar">
				<u--image
				width="72" 
				height="72" 
				src="https://cdn.uviewui.com/uview/album/1.jpg" 
				shape="circle"></u--image>
			</view>
			
			<view class="cd-userinfo-username" @tap="show = true">点击登录</view>
			
			<view class="cd-userinfo-logout">
				<!-- 右箭头 -->
				<u-icon @tap="show = true" name="arrow-right" color="white" size="14"></u-icon>
			</view>
		</view>

		<view class="cd-user-grid">
			<u-grid :border="true" @click="click">
				<u-grid-item v-for="(baseListItem, baseListIndex) in baseList" :key="baseListIndex" bgColor="white">
					<u-icon class="grid-myicon" :customStyle="{ paddingTop: 20 + 'rpx' }" :name="baseListItem.icon" :size="28"></u-icon>
					<text class="grid-text">{{ baseListItem.title }}</text>
				</u-grid-item>
			</u-grid>
			<u-toast ref="uToast" />
		</view>

		<customTabBar></customTabBar>
	</view>
</template>

<script>
import customTabBar from '@/custom-tab-bar/index.vue';
import { ApiLogin } from '@/utils/api.js';
import { isLogin } from '@/utils/units.js';

export default {
	components: {
		customTabBar
	},
	data() {
		return {
			isLogin: false,
			
			// 显示退出对话框
			logoutWindowShow: false,
			
			// 显示登录框
			show: false,

			// 宫格信息
			baseList: [
				{ title: '我的订单', icon: 'order' },
				{ title: '优惠券', icon: 'coupon' },
				{ title: '礼品卡', icon: 'bag' },
				{ title: '我的收藏', icon: 'map' },
				{ title: '我的足迹', icon: 'car' },
				{ title: '会员福利', icon: 'account' },
				{ title: '地址管理', icon: 'calendar' },
				{ title: '账号安全', icon: 'warning' },
				{ title: '联系客服', icon: 'kefu-ermai' },
				{ title: '帮助中心', icon: 'question-circle' },
				{ title: '意见反馈', icon: 'share-square' }
			],
			// 用户信息
			userInfo: {},

			// 表单信息
			model1: {
				userInfo: {
					username: '',
					pwd: ''
				}
			},
			// 表单的规则
			rules: {
				'userInfo.username': {
					type: 'string',
					required: true,
					message: '请填写用户名',
					trigger: ['blur', 'change']
				},
				'userInfo.pwd': {
					type: 'string',
					required: true,
					message: '请填写密码',
					trigger: ['blur', 'change']
				}
			}
		};
	},
	onShow() {
		this.$store.commit('changeTabbarIndex', 4);
		this.isLogin = isLogin();
		this.userInfo = uni.getStorageSync('userInfo');
	},
	methods: {
		click(name) {
			this.$refs.uToast.success(`点击了第${name}个`);
		},
		// 登录方法
		async login() {
			let form1 = this.$refs.form1;
			
			form1.validate().then(async (res1) => {
				uni.$u.toast('校验通过')
				let res = await ApiLogin(this.model1.userInfo.username, this.model1.userInfo.pwd);
				
				// 登录失败的时候
				if (res.errno !== 0) {
					uni.showToast({
						title: res.errmsg,
						icon: "error"
					});
					// 表单信息
					this.model1.userInfo = { username: '', pwd: '' };
					return;
				}
				
				
				let { userInfo, token } = res.data;
	
				this.userInfo = userInfo;
				
				uni.setStorageSync('token', token);
				uni.setStorageSync('userInfo', userInfo);
				uni.showToast({
					title: '登录成功',
					icon: 'success'
				});
				this.isLogin = true;
				// 登录成功后，将登录弹窗隐藏
				this.show = false;

			}).catch(errors => {
				console.log(errors);
				uni.$u.toast('校验失败')
			})
		},
		// 退出
		logout() {
			this.logoutWindowShow = true;
		},
		// 退出登录的对话框
		logoutWindowConfirm() {
			this.isLogin = false;
			this.show = false;
			this.logoutWindowShow = false;
			uni.removeStorageSync('token');
			uni.removeStorageSync('userInfo');
		},
		loginwindowclose() {
			this.show = false;
		}
	}
};
</script>

<style lang="scss">
// 用户登录（用户信息）
.cd-userinfo-area {
	height: 220rpx;
	background-color: #333333;
	display: flex;
	.cd-userinfo-avatar {
		flex: 1;
		max-width: 182rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.cd-userinfo-username {
		flex: 1;
		display: flex;
		// justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: white;
	}
	.cd-userinfo-logout {
		flex: 1;
		max-width: 68rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
}

.content {
	background-color: #efefef;
}

// 宫格
.u-grid-item {
	// background-color: white !important;
	height: 250rpx;
	.grid-text {
		font-size: 24rpx;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}
}

// 弹出框
// .u-modal {
// 	.u-modal__content {
// 		padding: 12px 0px 25px 0px !important;
// 		.u-form-item__body {
// 		}
// 		.u-form-item__body__left {
// 			width: 150rpx;
// 		}
// 	}
// }

.cd-user-grid {
	padding-bottom: 120rpx;
}
</style>
